<template>
  <view class="container-home" >
    <view class="hone-nav" :style="[`height: ${navStyly.nav_height + navStyly.nav_top + 20}px`, `padding-top: ${navStyly.nav_top}px`]">
     <view class="home-search" :style="[`height:${navStyly.nav_height}px`]">
       <view class="search">
         <text class="placeholder">搜索</text>
       </view>
     </view>
    </view>
    <swiper :indicator-dots="true" indicator-active-color="#44cd8c" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(swiperItems, i) in swiperList" :key="i">
       <navigator class="swiperItem" :url="`/subpkg/goods_detail/goods_detail?goods_id=${swiperItems.goods_id}`">
          <image class="swiper-image" :src="swiperItems.image_src"></image>
       </navigator>
      </swiper-item>
    </swiper>
    <view class="nav-list">
      <view class="navItem-List" v-for="(navItems, i) in navList" :key="i" @click="ckassItem(navItems)">
        <image class="navIcon" :src="navItems.image_src" mode=""></image>
      </view>
    </view>
  </view>
  
    <view class="goods-storey">
      <view class="storey-items" v-for="(floorItems,index) in floor" :key="index">
          <view class="dress-title">
            <image class="image-title" :src="floorItems.floor_title.image_src" mode=""></image>
          </view>
          <view class="dress-floor" :key="index">
            <navigator class="floor-main" :url="floorItems.product_list[0].navigator_url">
              <image 
              class="item-image" 
              :src="floorItems.product_list[0].image_src" 
              mode="widthFix" 
              :style="`width: ${floorItems.product_list[0].image_width}rpx`"
              >
              </image>
            </navigator>
            <view class="floor-order">
              <navigator class="order-item" v-for="(floorItems, i) in floorItems.product_list" :key="i" :url="floorItems.navigator_url"> 
                <image v-if="i !== 0 " class="item-image" :src="floorItems.image_src" mode="widthFix" :style="`width: ${floorItems.image_width}rpx`"></image>
              </navigator>
            </view>
          </view>
      </view>
    </view>

</template>

<script setup>
 import {ref,reactive,onBeforeMount} from 'vue'
 const but_data = ref(null)
 onBeforeMount(() =>  {
   capSule()
   getSwiperList()
   getNavList()
   getFloorList()
 })
 const navStyly = reactive({
   nav_top: '',
   nav_height: ''
 })
 const capSule = () => {
   but_data.value = wx.getMenuButtonBoundingClientRect()
   console.log(but_data.value);
   navStyly.nav_top = but_data.value.top
   navStyly.nav_height = but_data.value.height
 }
 // 轮播图
 const swiperList = ref([])
 const getSwiperList = async () => {
   const {data} = await uni.$http.get('/api/public/v1/home/swiperdata')
   console.log(data);
   if(data.meta.status !== 200) {
     return uni.$showMsg()
   }
   swiperList.value = data.message
 }
 // 导航分类
 const navList = ref([])
 const getNavList = async () => {
   const {data} = await uni.$http.get('/api/public/v1/home/catitems')
   if(data.meta.status !== 200) return uni.$showMsg()
   navList.value = data.message
 }
 const ckassItem = (val) => {
   if(val.name ===  "分类") {
     uni.switchTab({
       url: '/pages/cate/cate'
     })
   }
 }
 
 // 类目分层
 const floor = ref([])
 const getFloorList = async () => {
   const {data} = await uni.$http.get('/api/public/v1/home/floordata')
   if(data.meta.status !== 200) return uni.$showMsg()
   console.log(data);
   floor.value = data.message
 }
</script>

<style lang="scss">
  .container-home {
    background: linear-gradient(
    to top,
    rgba(87, 218, 102, 0) 0,
    rgba(87, 218, 102, 0.2) 25%,
    rgba(87, 218, 102, 0.5) 50%,
    rgba(87, 218, 102, 0.8) 75%,
    rgba(87, 218, 102, 1) 100%
    );
    .hone-nav {
      box-sizing: border-box;
      .home-search {
         height: 50px;
         padding: 0 10px;
         display: flex;
         align-items: center;
        .search {
            height: 36px;
            background-color: #ffffff;
            border-radius: 30rpx;
            width: 500rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
      }
      
    }
    swiper {
      height: 350rpx;
      .swiperItem,.swiper-image {
        width: 100%;
        height: 100%;
      }
    }
      
    .nav-list {
      display: flex;
      height: 180rpx;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 15rpx;
      padding: 0 20rpx;
      background: #fff;
      box-sizing: border-box;
      border-radius: 20rpx;
      box-shadow: 0rpx 0.5rpx 6rpx #000;
      .navItem-List {
        .navIcon {
            width: 128rpx;
            height: 140rpx;
        }
      }
    }
  }
    
  .goods-storey {
    .storey-items {
      margin: 15rpx 0;
      .dress-title {
        .image-title {
          height: 60rpx;
          width: 100%;
          display: flex;
        }
      }
      .dress-floor {
        display: flex;
        width: 100%;
        .floor-order {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
        }
      }
    }
  }
</style>
